<template>
	<div class="visitac-home-panel" style="height: 100%;">
		<div class="visitac-info-wrap">
			<div v-if="treeNodeSize == 0 " style="color:#909399;padding-top:30px;text-align:center;">
				{{$t("暂无数据")}}
			</div>
			<div style="height: 100%;" v-if="treeNodeSize == 1000 ">
				<div v-if="treeNodeData.id!=undefined">
					<div class="visitac-header-title">{{$t("菜单访问权限")}}</div>
					<div class="visitac-header-subtitle" v-text="escape2Html(treeNodeData.path)"></div>
					<div class="visitac-header-toolbar">
						<awsui-button type="primary" icon="&#xe623;" style="width:150px;height:30px;margin:5px 0px;" @click="openAC" :disabled="!canOperateAc">{{$t("添加权限")}}</awsui-button>
						<awsui-button-group style="margin:0px 10px;" v-show="!treeNodeData.leaf">
							<awsui-button style="height:30px;margin:5px 0px;" @click="handleAcTypeForSub('overwrite')" :disabled="!canOperateAc">{{$t("权限覆盖到下级")}}</awsui-button>
							<awsui-button style="height:30px;margin:5px 0px;" @click="handleAcTypeForSub('append')" :disabled="!canOperateAc">{{$t("权限追加到下级")}}</awsui-button>
						</awsui-button-group>
					</div>
					<div class="visitac-list-panel"  :style="{height:(multipleSelection.length>0)?acListSelectHeight:acListHeight}" :class="tableData.length>0?'ac-hasDatas':'ac-noDatas'">

						<el-skeleton style="width: 100%;" rows="5" :loading="acListLoading" animated class="visitac-skeleton-panel">
							<template #template>

								<el-table
										ref="multipleTable"
										:data="skeletonTableData"
										tooltip-effect="dark"
										style="width: 100%"
										:emptyText="$t('暂无数据')">
									<el-table-column :label="typeText" width="130" sortable prop="actype">
										<template #default="scope">
											<el-skeleton-item variant="text" style="width: 100%;height:23px;"/>
										</template>
									</el-table-column>
									<el-table-column prop="secCategory" :label="$t('名称')" width="250" show-overflow-tooltip sortable>
										<template #default="scope">
											<el-skeleton-item variant="text" style="width: 100%;height:23px;"/>
										</template>
									</el-table-column>
									<el-table-column prop="explanation" :label="$t('描述')" show-overflow-tooltip>
										<template #default="scope">
											<el-skeleton-item variant="text" style="width: 100%;height:23px;"/>
										</template>
									</el-table-column>
								</el-table>
							</template>
						</el-skeleton>

						<el-table
								v-show="!acListLoading"
								ref="multipleTable"
								:data="tableData"
								tooltip-effect="dark"
								style="width: 100%"
								@selection-change="handleSelectionChange"
                :class="isYijingCloud?'isYijing':''"
								>
                <template #empty>
                  <div v-if="isYijingCloud" style="display: flex;flex-direction: column;" >
                    <span> {{$t("应用上线后，该菜单为开放访问")}}</span>
                    <span class="spanSecond">{{$t("点击添加权限限定可见范围")}}</span>
                  </div>
                  <span v-else>
                     {{$t("暂无数据")}}
                  </span>
                </template>
							<el-table-column type="selection" width="80" v-if="canOperateAc"></el-table-column>
							<el-table-column :label="typeText" width="130" sortable prop="secGroup">
								<template #default="scope">{{ scope.row.secGroup }}</template>
							</el-table-column>
							<el-table-column prop="secCategory" :label="$t('名称')" width="250" show-overflow-tooltip sortable>
								<template #default="scope">
									<span v-html="scope.row.secCategory"></span>
								</template>
							</el-table-column>
							<el-table-column prop="explanation" :label="$t('描述')" show-overflow-tooltip></el-table-column>
						</el-table>

					</div>
				</div>
				<div v-else-if="treeNodeData.id==undefined" style="width:100%">
					<!--展示第一个子系统数据-->
					<el-skeleton style="width: 100%;" rows="5" :loading="treeDataLoading" animated>
						<template #template>
							<div class="visitac-header-title">
								<el-skeleton-item variant="text" style="width: 150px;height:22px;"/>
							</div>
							<div class="visitac-header-subtitle">
								<el-skeleton-item variant="text" style="width: 200px;height:14px;"/>
							</div>
							<div class="visitac-header-toolbar">
								<el-skeleton-item variant="text" style="width:150px;height:30px;margin:5px 0px;border-radius:2px;"/>
								<div style="display: inline-block;padding:0px 10px;">
									<el-skeleton-item variant="text" style="display:inline-block;width:120px;height:30px;margin:5px 0px;border-radius:2px;"/>
									<el-skeleton-item variant="text" style="display:inline-block;width:120px;height:30px;margin:5px 0px;border-radius:2px;"/>
								</div>
							</div>
						</template>
					</el-skeleton>
					<el-skeleton style="width: 100%;" rows="5" :loading="acListLoading" animated class="visitac-skeleton-panel">
						<template #template>

							<el-table
									ref="multipleTable"
									:data="skeletonTableData"
									tooltip-effect="dark"
									style="width: 100%"
									:emptyText="$t('暂无数据')">
								<el-table-column :label="typeText" width="130" sortable prop="actype">
									<template #default="scope">
										<el-skeleton-item variant="text" style="width: 100%;height:23px;"/>
									</template>
								</el-table-column>
								<el-table-column prop="secCategory" :label="$t('名称')" width="250" show-overflow-tooltip sortable>
									<template #default="scope">
										<el-skeleton-item variant="text" style="width: 100%;;height:23px;"/>
									</template>
								</el-table-column>
								<el-table-column prop="explanation" :label="$t('描述')" show-overflow-tooltip>
									<template #default="scope">
										<el-skeleton-item variant="text" style="width: 100%;height:23px;"/>
									</template>
								</el-table-column>
							</el-table>
						</template>
					</el-skeleton>

				</div>


			</div>
			<div v-else style="width: 100%;height: 100%;border: none;">系统</div>
			<!-- <iframe v-else :src="linkUrl" style="width: 100%;height: 100%;border: none;"></iframe> -->
		</div>
		<div class="visitac-footer-toolbar" v-show="multipleSelection.length>0">
			<div style="padding:0px 25px;">
				<el-link v-html="multipleSelection.length>0?selectText:''" type="info" underline="false" href="javascript:void(0);" style="font-size:12px;font-weight:normal;padding:3px 0px 0px 3px"></el-link>
				<br/>
				<awsui-button type="danger" style="height:30px;margin:5px 5px;" v-show="multipleSelection.length>0" @click="deleteRecord">{{$t("删除")}}</awsui-button>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: "VisitInfo",
		props: {
			'treeNodeData': Object,
			'treeNodeSize':Number,
			'isYijingCloud': Boolean,
			'isYijingStandard': Boolean,
		},
		data() {
			return {
				labelPosition: 'left',
				item: {},
				isReadOnlyAppAuth: false,
				typeText: this.$t("类型"),
				selectText: this.$t("已选 0 个"),
				tableData: [],
				linkUrl:"",
				skeletonTableData: [{
					secGroup: 'XXX',
					secCategory: 'XXXXXX',
					explanation: 'XXXXXXXXXXXXXXXXXXX'
				}, {
					secGroup: 'XXX',
					secCategory: 'XXXXXX',
					explanation: 'XXXXXXXXXXXXXXXXXXX'
				}, {
					secGroup: 'XXX',
					secCategory: 'XXXXXX',
					explanation: 'XXXXXXXXXXXXXXXXXXX'
				}, {
					secGroup: 'XXX',
					secCategory: 'XXXXXX',
					explanation: 'XXXXXXXXXXXXXXXXXXX'
				}, {
					secGroup: 'XXX',
					secCategory: 'XXXXXX',
					explanation: 'XXXXXXXXXXXXXXXXXXX'
				}],
				multipleSelection: [],
				acListHeight: (document.documentElement.clientHeight) - 118 - 40 + 'px',//
				acListSelectHeight: (document.documentElement.clientHeight) - 118 - 60 - 40 + 'px',
				acListLoading: true,
				canOperateAc: false,
				acAddressShowPermission: false,
				acAddressShowOrg: false,
				acAddressOnlyShowUser: this.isYijingCloud  && this.isYijingStandard,//只有易鲸云标准版限制只能选择组织的人
        isHighSecurity:settingParam.isHighSecurity,
        isSystemMaster:settingParam.isSystemMaster,
        isSecurityMaster:settingParam.isSecurityMaster,
        warningInfo:[
          this.$t("确定要把权限覆盖到下级吗？"),this.$t("确定要把权限追加到下级吗？"),this.$t("确定要删除吗？")
        ],
        confirmTitle: this.$t('提示'),
        confirmOk:this.$t('确定'),
        confirmCancel:this.$t('取消'),
        accessPerm:this.$t('菜单访问权限'),
        selectionText:[
          this.$t("类型"),this.$t("已选"),this.$t("个")
        ],
        selectTextDefault:this.$t("已选 0 个"),
			}
		},
		mounted() {
			if (this.treeNodeData.id != undefined) {
				this.loadAcData();
			}
		},
		watch: {
			isYijingCloud(val) {
				this.acAddressOnlyShowUser = val;
			},
			treeNodeData: {
				handler: function (val) {
					console.log(this.treeNodeData.hasSecurityGroupRight);
					if (this.treeNodeData.id != undefined) {
						this.loadAcData();
					}
					//之前是 有二级管理员管理权限和权限组某个分类的二级管理员的管理或分配权限
					//现在 有二级管理员的管理权限 或者 权限组某个分类的二级管理员的管理或分配权限
					let hasSecurityGroupRight = this.treeNodeData.hasSecurityGroupRight;//是否有权限组的二级管理员权限
					let hasManagerAC = this.treeNodeData.hasManagerAC;//是否有操作权限
					if (hasSecurityGroupRight) {
						this.acAddressShowPermission = true;
					} else {
						this.acAddressShowPermission = false;
					}
					if (hasManagerAC) {
						this.acAddressShowOrg = true;
					} else {
						this.acAddressShowOrg = false;
					}
          //PIF20240125506相关：三员开启时，导航权限相关操作（授权，删除授权，覆盖权限等）隶属于安全保密管理员用户
          if (this.isHighSecurity) {
            if (this.isSecurityMaster) {
              this.canOperateAc = true;
            }
          } else {
            if (hasSecurityGroupRight || hasManagerAC) {
              this.canOperateAc = true;
            } else {
              this.canOperateAc = false;
            }
          }
				}
			}
		},
		methods: {
			escape2Html(str) {
				str = (str == undefined) ? '' : str;
				//转义字符转换普通字符的方法
				var arrEntities = {'lt': '<', 'gt': '>', 'nbsp': ' ', 'amp': '&', 'quot': '"'};
				return str.replace(/&(lt|gt|nbsp|amp|quot);/ig, function (all, t) {
					return arrEntities[t];
				});
			},
			loadAcData() {

				console.log(1234567);
				console.log(1234567);
				console.log(1234567);

				let $this = this;
				let that = this;
				let id = that.treeNodeData.id;
				// id = id.substr(2);//报错
				that.acListLoading = true;
				that.linkUrl ="https://blog.csdn.net/weixin_43244049/article/details/105578800";
				// linkUrl = "https://blog.csdn.net/weixin_43244049/article/details/105578800";
				// return `<a href="https://www.example.com" target="_blank">点击这里</a>`;
				// const data = {
				// 	url: 'jd',
				// 	data: {
				// 		cmd: 'CLIENT_M_COMMON_SECURITYGROUP_JSON_DATA',
				// 		sid: settingParam.sessionId,
				// 		id: id,
				// 		permissionType: "nav",
				// 		type: "",
				// 		permissionName: "",
				// 		categoryName: "",
				// 	}
				// };
				
				// // 查询数据
				// that.awsuiaxios.post(data).then(function (ro) {
				// 	console.log(ro.data);
				// 	that.tableData = ro.data.data;
				// 	that.acListLoading = false;
				// 	that.$emit('visitAcSize', that.tableData.length);
				// 	console.log("window.isYijingWechat:"+window.isYijingWechat);
				// 	setTimeout(function () {
				// 		if (window.isYijingWechat) {
				// 			let querySelector = document.querySelectorAll('ww-open-data');
				// 			if (self.frameElement && self.frameElement.tagName == "IFRAME") {
				// 				console.log("if");
				// 				console.log(querySelector);
				// 				top.window.WWOpenData.bindAll(querySelector);
				// 			} else {
				// 				console.log("else");
				// 				console.log(querySelector);
				// 				window.WWOpenData.bindAll(querySelector);
				// 			}
				// 		}
				// 	},300);
				// }).catch(error => {
				// 	console.log(error);
				// });
			},
			handleSelectionChange(data) {
				this.multipleSelection = data;
				if (data.length == 0) {
					this.typeText = this.selectionText[0];
				} else {
					let text = this.selectionText[1]+" "+ data.length + " " + this.selectionText[2];
					this.typeText = text;
					this.selectText = text;
				}
			},
			handleAcTypeForSub(type) {
      let that = this;
			 var warningInfo = that.warningInfo[0];
				if (type == "append") {
					warningInfo = that.warningInfo[1];
				}
        that.$confirm(warningInfo, that.confirmTitle, {
          confirmButtonText: that.confirmOk,
          cancelButtonText: that.confirmCancel,
					type: 'warning'
				}).then(() => {
          that.acApplyToSub(type);
				});
			},
			acApplyToSub(type) {
				//type append追加  overwrite  覆盖
				let $this = this;
				let that = this;
				let data = {
					url: 'jd',
					data: {
						cmd: 'CONSOLE_P_NAV_AC_APPLY_TO_SUB',
						sid: settingParam.sessionId,
						type: type,
						id: that.treeNodeData.id,
					}
				};
				that.awsuiaxios.post(data).then(function (ro) {
					that.$message({type: 'success', message: that.$t("操作成功")});
				}).catch(error => {
					console.log(error);
				});
			},
			deleteRecord(){
        let that = this;
        var warningInfo = that.warningInfo[2];
        that.$confirm(warningInfo,that.confirmTitle, {
          confirmButtonText: that.confirmOk,
          cancelButtonText: that.confirmCancel,
					type: 'warning'
				}).then(() => {
          that.doDeleteRecord();
				}).catch(() => {
				});
			},
			doDeleteRecord() {
				//参考 console.m.common.group.security.js
				let $this = this;
				let that = this;
				let id = that.treeNodeData.id;
				id = id.substr(2);
				var datas = [];
				var acDatas = [];
				for (var i = 0; i < that.multipleSelection.length; i++) {
					if (that.multipleSelection[i].dataType == 'AC授权组织') {
						acDatas.push(that.multipleSelection[i].id);
					} else if (that.multipleSelection[i].dataType == '权限组') {
						datas.push(that.multipleSelection[i].id);
					}
				}
				datas = datas.join(" ");
				if (datas.length > 0) {
					//删除权限
					let data = {
						async: false,
						url: 'jd',
						data: {
							sid: settingParam.sessionId,
							cmd: "CLIENT_M_COMMON_SECURITYGROUP_REMOVE",
							id: id,
							permissionType: 'nav',
							securityList: datas,
						}
					};
					that.awsuiaxios.post(data).then(function (ro) {
						if (ro.result == "ok") {
							that.loadAcData();
						}
					}).catch(error => {
						console.log(error);
					});
				}
				//删除AC权限
				if (acDatas.length > 0) {
					for (var i = 0; i < acDatas.length; i++) {
						let data = {
							async: false,
							url: 'jd',
							data: {
								sid: settingParam.sessionId,
								cmd: "CONSOLE_COMMON_ACCESSCONTROL_AC_REMOVE",
								resourceId: '',
								resourceType: "platform.processStart",
								id: acDatas[i],
								invoke: 'ajaxDeleteOrgAC' //作为ac 授权组织 外部删除操作标示，提示该请求为ajax请求
							}
						};
						that.awsuiaxios.post(data).then(function (ro) {
							if (ro.result == "ok") {
								that.loadAcData();
							}
						}).catch(error => {
							console.log(error);
						});
					}

				}
				that.$message({type: 'success', message: that.$t("操作成功")});
			},
			openAC() {
				let $this = this;
				let that = this;
				let id = that.treeNodeData.id;
				id = id.substr(2);
				let assignmentTypes = "";//permission,company,position,role,team
        console.log(that.acAddressOnlyShowUser);
        console.log(that.acAddressShowPermission);
				if (that.acAddressOnlyShowUser) {
					if (that.acAddressShowPermission) {
						assignmentTypes += "permission,";
					}
					assignmentTypes += "user,position,role,team,";
				} else {
					if (that.acAddressShowPermission) {
						assignmentTypes += "permission,";
					}
					if (that.acAddressShowOrg) {
						assignmentTypes += "company,department,user,position,role,team,";
					}
				}
        console.log(assignmentTypes);
				if (assignmentTypes.length > 0) {
					assignmentTypes = assignmentTypes.substr(0, assignmentTypes.length - 1);
				}
				let acOptions = {
					sid: settingParam.sessionId,
					title: that.accessPerm,
					width: 900,
					resourceId: id,
					resourceType: 'platform.navFunction',
					assignmentTypes: assignmentTypes,
					permissionType: 'nav',
					//groupType: 'permission',
					callback: (list) => {
						that.loadAcData();
					}
				};
				if (that.acAddressShowPermission) {
					acOptions.groupType = "permission";
				}
				console.log(acOptions);
				that.AWSUI.openAc(acOptions);
			}

		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.visitac-home-panel {
		float: left;
		width: 100%;
		text-align: left;
	}

	.visitac-info-wrap {
		overflow-y: auto;
		padding: 0px 0px 0px 25px !important;
		height: calc(100% - 50px);

	}

	.visitac-header-title {
		font-size: 16px;
		color: #333;
		font-weight: 700;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		padding-top: 5px;
	}

	.visitac-footer-toolbar {
		padding: 0px !important;
		position: absolute;
		bottom: 0px;
		width: 100%;
		height: 60px;
		background: #f9fafc;
		z-index:1;
	}

	.visitac-header-subtitle {
		font-size: 13px;
		color: #909399;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		padding: 10px 0px;
	}

	.visitac-list-panel {
		height: calc(100% - 110px - 60px);
		overflow-y: auto;
		overflow-x:hidden;
	}

	.info-title {
		font-size: 13px !important;
		color: #333 !important;
		font-weight: 700 !important;
		margin-top: 10px;
		display: inline-block !important;
	}

	.default-divider {
		margin: 6px 0 !important;
	}
</style>
<style>
	.visitac-list-panel  .el-table td, .el-table th{
		padding:8px 8px 8px 0px !important;
	}
	.ac-noDatas .el-table:before {
		background-color: white;
	}

	.visitac-list-panel .el-table__empty-block {
		height: calc(100vh - 220px) !important;
	/*	width: 150px !important;*/
		width: 220px !important;
		margin: 0 auto !important;
		align-items: unset;
	}
  .visitac-list-panel .el-table__empty-text {
    display: block;
    width: 100px !important;
    height: 100px !important;
    padding-top: 0px;
    background-size: 100px 100px !important;
    background-repeat: no-repeat !important;
    background: url('../../assets/no_content.png');
    color: #909399;
    box-sizing: content-box;
    margin-top: calc(50vh - 100px - 80px) !important;
    line-height: 250px !important;
  }
	.visitac-list-panel .isYijing .el-table__empty-text{
		display: block;
		width: 200px !important;
		height: 200px !important;
		padding-top: 0px;
		background-size: 200px 200px !important;
		background-repeat: no-repeat !important;
		background: url('../../assets/yijing_no_content.png');
		color: #3d5dd7;
    font-size: 14px;
		box-sizing: content-box;
		margin-top: calc(50vh - 100px - 80px) !important;
    line-height: 450px !important;
    text-align:center;
	}

  .el-table__empty-text .spanSecond{
    height: 20px;
    font-size: 12px;
    color: #666;
    margin-top: -425px;
  }
	/*el-table 行字体大小*/
	.el-table__row {
		font-size: 12px !important;
	}

	.el-table td, .el-table th {
		padding: 8px !important;
	}

	.visitac-skeleton-panel .el-table .cell {
		height: 23px !important;
	}
</style>